<!doctype html>
<html lang="en">
<head>
    <style>
        @import url("../plugins/element-ui/lib/theme-chalk/index.css");

        .el-carousel__item h3 {
            color: #475669;
            font-size: 14px;
            opacity: 0;
            line-height: 300px;
            margin: 0;
        }

        .el-carousel__item:nth-child(1n) {
            background-image: url("../images/广告位图片2.png");
            background-repeat: no-repeat;
            background-size: 100% 100%;
        }

        .el-carousel__item:nth-child(2n) {
            background-image: url("../images/广告位图片2.png");
            background-repeat: no-repeat;
            background-size: 100% 100%;
        }

        .el-carousel__item:nth-child(3n) {
            background-image: url("../images/广告位图片2.png");
            background-repeat: no-repeat;
            background-size: 100% 100%;
        }

        /*.el-carousel__item:nth-child(3n+1) {*/
            /*background-image: url("../images/广告位图片2.png");*/
            /*background-repeat: no-repeat;*/
            /*background-size: 100% 100%;*/
        /*}*/

        /*.el-carousel__item:nth-child(5n) {*/
            /*background-image: url("../images/广告位图片2.png");*/
            /*background-repeat: no-repeat;*/
            /*background-size: 100% 100%;*/
        /*}*/

        /*.el-carousel__item:nth-child(6n) {*/
            /*background-image: url("../images/广告位图片2.png");*/
            /*background-repeat: no-repeat;*/
            /*background-size: 100% 100%;*/
        /*}*/

    </style>
</head>

<script src="../js/vue.js"></script>
<script src="../plugins/element-ui/lib/index.js"></script>

<div id="app">
    <template>
        <el-carousel :interval="4000" type="card" height="300px">
            <el-carousel-item v-for="item in 3" :key="item" width="804px" height="300px">
                <h3 class="medium">{{ item }}</h3>
            </el-carousel-item>
        </el-carousel>
    </template>
</div>

<script>
    new Vue().$mount("#app");
    $(function () {
        var wd = 200;
        $("#app").css('width', $('body').width() - wd + 'px');
    });

    window.onresize = function(){
        var wd = 200;
        $("#app").css("width",$("body").width() - "px");
    }
</script>

</html>